import React from "react"
import s from "./style.module.less"
import { RightOutlined } from "@ant-design/icons"

export default function Classification({ category }) {
  return (
    <div className={s.classification}>
      <div className={s.top}>
        <div style={{ display: "flex", alignItems: "center" }}>
          <svg className="icon" aria-hidden="true">
            <use xlinkHref="#icon-fenlei"></use>
          </svg>
          <span className={s.title}>分类</span>
        </div>
        <span className={s.btn}>
          <RightOutlined />
        </span>
      </div>
      <div className={s.content}>
        {category.map((item) => {
          return (
            <div className={s.list} key={item.id}>
              <span className={s.name}>{item.name}</span>
              <span className={s.num}>{item.articlesTotal}</span>
            </div>
          )
        })}
      </div>
    </div>
  )
}
